/**
 * Created by ptt on 2016/5/27/0027.
 */
define(["../maintools/Controller.js", "./tpl.js", "./dataHandle.js"], function (Controller, tpl, handle) {
    //initial searchbox has bug for global value jQuery
    tpl = tpl.scrollpage;
    Controller = Controller.Controller;
    var data = handle;
    $("#scrollpage").html(tpl.render(data));
    var Trigger = Controller.create({
        //elements: {
        //    "button.js-search": "searchButton",
        //    "input.js-search": "searchBox"
        //},
        events: {
            "mousewheel": "mouseScroll",
            "DOMMouseScroll": "mouseScroll"
        },
        show: function () {

        },
        mouseScroll: function () {
            console.log(this.li);
            console.log(this.el[0].scrollTop);
            console.log(this.el[0].scrollHeight);
            //this.el[0].scrollTop += "10px";
            var lis = this.el.find("li");
            var len = lis.length;
            lis.css({
                color: "",
                "font-size": ""
            });
            $(lis[this.li]).css({
                color: "red",
                "font-size": "18px",
                opacity: 1
            });
            for (var j = this.li - 1; j >= 0; j--) {
                $(lis[j]).css({
                    "font-size": 12 + j + "px",
                    opacity: 0.5 +j/10
                })
            }
            for (var i = this.li + 1; i < len; i++) {
                $(lis[i]).css({
                    "font-size": 14 - i + "px",
                    opacity: 1 - i/10
                })
            }
            this.li = this.li + 1 > len ? len - 1 : this.li + 1;
            //if (this.li < len - 1) {
            //    ul.css({
            //        top: parseInt(ul.css("top")) - 10 + "px"
            //    })
            //}
        },
        li: 0

    });
    var trigger = new Trigger("#scrollpage");
    return {
        searchBoxController: trigger
    }

});